<template>
	<view class="cu-form-group many-select">
	  <view class="margin-bottom-sm">
		  <text>{{title}}</text>
	  </view>
	  <view class="flex-sub flex align-center flex-wrap">
		<!-- 多选 -->
	    <block v-if="type==='checkbox'">
	      <view class="select-item flex justify-center align-center margin-bottom-sm" :class="{active2:item.checked}"
	        @click="handleMutilCheck(index)" v-for="(item,index) of list" :key="index">
	        {{labelKey?item[labelKey]:item}}
	      </view>
	    </block>
		
		<!-- 单选 -->
		<block v-else>
		  <view class="select-item flex justify-center align-center margin-bottom-sm" :class="{active2:value==item[valueKey]}"
		    @click="handleMutilCheck(index)" v-for="(item,index) of list" :key="index">
		    {{labelKey?item[labelKey]:item}}
		  </view>
		</block>
	  </view>
	</view>
</template>
<script>
	export default{
		props:{
			title:{
				type:String,
				default:""
			},
			list:{
				type:Array,
				default:()=>([])
			},
			value:{
				type:[Array,String,Number]
			},
			//用于展示的属性
			labelKey:{
				type:String,
				default:'name'
			},
			//用于取值的属性
			valueKey:{
				type:String,
				default:'id'
			},
			//单选还是多选
			type:{
				type:String,
				default:"checkbox"
			}
		},
		data(){
			return {
				radio:{}
			}
		},
		methods:{
			handleMutilCheck(index){
				let list=this.$h.utils.deepClone(this.list)
				if(this.type==='checkbox'){
					let checked=list[index].checked
					list[index].checked=!list[index].checked
					this.$emit("update:list",list)
					let checkedList=list.filter(item=>item.checked)
					this.$emit("update:value",checkedList.map(item=>item[this.valueKey]).join(','))
				}else{
					this.radio=list[index]
					this.$emit('update:value',this.radio[this.valueKey])
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-form-group {
	  padding: 0;
	  font-size: 24rpx;
	
	  .title {
	    font-size: 24rpx;
	  }
	
	  &.many-select {
	    flex-direction: column;
	    align-items: flex-start;
	    padding: 10rpx 0;
	  }
	
	  .select-item {
	    min-width: 120rpx;
	    height: 50rpx;
	    padding: 0 34rpx;
	    border-radius: 25rpx;
	    background-color: $bgColor;
	    margin-right: 20rpx;
	    font-size: 24rpx;
	    color: #000;
	
	    &.active {
	      color: $mainColor;
	    }
	
	    &.active2 {
	      background-color: $mainColor;
	      color: #fff;
	    }
	  }
	}
	
</style>
